import Cookie from 'js-cookie'
// 使用 UUID（Universally Unique Identifier）库生成唯一标识符
import { v4 as uuidv4 } from 'uuid'
import { getUser, registerUser, getIP, getAddress } from '@/api/user.js'
import { getImportedPF, importPF } from '@/api/data.js';
import pako from 'pako';


export default {
    data() {
        var checkName = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('用户名不能为空'));
            } else if (value.length > 20) {
                return callback(new Error('用户名长度不能超过20个字符'));
            }
            else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else if (value.length > 100) {
                return callback(new Error('密码长度不能超过100个字符'));
            } else {
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value.length > 100) {
                return callback(new Error('密码长度不能超过100个字符'));
            }
            else if (value !== this.form_register.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            // 登录
            form_login: {
                username: '',
                password: ''
            },
            rules_login: {
                username: [
                    { validator: checkName, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
            },
            // 注册
            form_register: {
                username: '',
                password: '',
                password_again: ''
            },
            rules_register: {
                username: [
                    { validator: checkName, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                password_again: [
                    { validator: validatePass2, trigger: 'blur' }
                ]
            },

            // 登录/注册按钮不能重复点击
            isToMain: false,
        }
    },
    methods: {
        // 进入系统初始化导入
        initData() {
            getImportedPF(this.$store.state.userData.userData.user_id).then(({ data }) => {
                if (data !== null && data !== undefined && data.length !== 0) {
                    this.$notify.info({
                        title: '消息',
                        message: '正在导入数据集',
                        position: 'bottom-right',
                        duration: 2000
                    });

                    const fileIds = data.map((file) => file.id);

                    importPF(fileIds).then(({ data }) => {
                        // 进行gzip解压缩
                        const inflatedData = pako.inflate(data, { to: 'string' });
                        data = JSON.parse(inflatedData);

                        this.$store.commit('getResult', data);

                        this.$notify({
                            title: '成功',
                            message: '数据集导入成功',
                            type: 'success',
                            position: 'bottom-right',
                            duration: 2000,
                        });
                    }).catch(error => {
                        console.log(error);
                        this.$notify.error({
                            title: '错误',
                            message: '数据集导入失败',
                            position: 'bottom-right',
                            duration: 2000,
                        });
                    }).finally({});
                }
            }).catch(error => {
                console.log(error);
                this.$notify.error({
                    title: '错误',
                    message: '数据集导入失败',
                    position: 'bottom-right',
                    duration: 2000,
                });
            });
        },
        toRegister() {
            console.log('register');
            const container = document.getElementById('container');
            container.classList.add("active");
        },
        onLogin() {
            this.$refs.form_login.validate((valid) => {
                if (valid) {
                    if (!this.isToMain) {
                        this.isToMain = true;

                        this.$message('正在登录，请稍后');
                        getUser(this.form_login).then(({ data }) => {
                            console.log(data);
                            const user_id = data.id;
                            if (data.code === 200) {
                                // token信息
                                const token = uuidv4();
                                // token信息存入cookie用于不同页面间的通信
                                Cookie.set('token', token, { expires: 1 })

                                // 获取当前时间作为登录时间
                                const loginTime = new Date().toLocaleString();

                                // 获取用户的地点信息，可以根据IP地址等方式获取
                                var loginLocation = 'Some Location';

                                getIP().then(({ data }) => {
                                    console.log(data)
                                    getAddress(data).then(({ data }) => {
                                        console.log(data)
                                        if (data.country !== '0') {
                                            loginLocation = data.country + data.province + data.city;
                                            console.log('登录地点1：', loginLocation);

                                            // 您可以将 loginTime 和 loginLocation 作为参数传递给后端接口进行记录
                                            // 或者将这些信息保存在用户信息中
                                            const userData = {
                                                user_id: user_id,
                                                username: this.form_login.username,
                                                password: this.form_login.password,
                                                date: loginTime,
                                                place: loginLocation
                                            };
                                            console.log(userData);

                                            // 将用户信息存入 Vuex 中
                                            this.$store.commit('getUserData', userData);

                                            this.$message({
                                                message: '登录成功',
                                                type: 'success'
                                            });
                                            // 初始化路由配置
                                            this.$store.commit('initRouter');

                                            // 跳转至首页
                                            this.$router.push('/main/import');

                                            // 初始化导入数据
                                            this.initData();
                                        } else {
                                            this.$message.error('获取登录地点失败');
                                        }
                                        this.isToMain = false;
                                    })
                                }).catch(error => {
                                    console.log(error);
                                    this.isToMain = false;
                                }).finally(() => {
                                    // 在异步操作结束后恢复按钮状态
                                });
                            } else {
                                this.$message.error(data.msg)
                                // 请求出错也需要恢复按钮状态
                                this.isToMain = false;
                            }
                        }).catch(error => {
                            // 请求出错也需要恢复按钮状态
                            this.isToMain = false;
                        })
                    }

                } else {
                    // 表单校验不通过也需要恢复按钮状态
                    // 表单校验不通过
                    this.$message({
                        message: '请按提示输入',
                        type: 'warning'
                    });
                }
            })
        },
        toLogin() {
            console.log('login');
            const container = document.getElementById('container');
            container.classList.remove("active");
        },
        onRegister() {
            this.$refs.form_register.validate((valid) => {
                if (valid) {
                    if (!this.isToMain) {
                        this.isToMain = true;

                        this.$message('正在登录，请稍后');
                        registerUser(this.form_register).then(({ data }) => {
                            console.log(data);
                            const user_id = data.id;
                            if (data.code === 200) {
                                // token信息
                                const token = uuidv4();
                                // token信息存入cookie用于不同页面间的通信
                                Cookie.set('token', token, { expires: 1 })

                                // 获取当前时间作为登录时间
                                const loginTime = new Date().toLocaleString();

                                // 获取用户的地点信息，可以根据IP地址等方式获取
                                var loginLocation = 'Some Location';
                                getIP().then(({ data }) => {
                                    console.log(data)
                                    getAddress(data).then(({ data }) => {
                                        console.log(data)
                                        if (data.country !== '0') {
                                            loginLocation = data.country + data.province + data.city;
                                            console.log('登录地点1：', loginLocation);

                                            // 您可以将 loginTime 和 loginLocation 作为参数传递给后端接口进行记录
                                            // 或者将这些信息保存在用户信息中
                                            const userData = {
                                                user_id: user_id,
                                                username: this.form_register.username,
                                                password: this.form_register.password,
                                                date: loginTime,
                                                place: loginLocation
                                            };

                                            // 将用户信息存入 Vuex 中
                                            this.$store.commit('getUserData', userData);

                                            this.$message({
                                                message: '登录成功',
                                                type: 'success'
                                            });
                                            // 初始化路由配置
                                            this.$store.commit('initRouter');
                                            // 跳转至首页
                                            this.$router.push('/main/import')
                                        } else {
                                            this.$message.error('获取登录地点失败');
                                        }
                                        this.isToMain = false;
                                    })
                                }).catch(error => {
                                    console.log(error);
                                    this.isToMain = false;
                                }).finally(() => {
                                    // 在异步操作结束后恢复按钮状态
                                });
                            } else {
                                this.$message.error(data.msg)
                                // 请求出错也需要恢复按钮状态
                                this.isToMain = false;
                            }
                        }).catch(error => {
                            // 请求出错也需要恢复按钮状态
                            this.isToMain = false;
                        })
                    }
                } else {
                    // 表单校验不通过也需要恢复按钮状态
                    // 表单校验不通过
                    this.$message({
                        message: '请按提示输入',
                        type: 'warning'
                    });
                }
            });
        },
    },
    mounted() {
        // 动画
        new this.$wow.WOW({
            live: true
        }).init();
    }
}